<template>
    <div class="content-container employee-container">
        <el-form :inline="true">
            <el-form-item label="关键字">
                <el-input v-model="keyword" placeholder="请输入姓名/电话"></el-input>
            </el-form-item>
            <el-form-item label="市场专员">
                <el-select v-model="selectSellerID" clearable>
                    <el-option
                            v-for="dkey in mktLists"
                            :label="dkey.name"
                            :value="dkey.id"
                            :key="dkey.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryEmployeeData()">查询</el-button>
                <el-button type="success" icon="el-icon-plus" @click="addPCustomerData()">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="employees" border style="width: 100%;">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
            <el-table-column prop="qq" label="QQ"></el-table-column>
            <el-table-column prop="job.title" label="职业"></el-table-column>
            <el-table-column prop="source.title" label="来源"></el-table-column>
            <el-table-column prop="seller.name" label="销售员"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">{{departments[scope.row.status + 1]}}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editDep(scope.row)">编辑
                    </el-button>
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="traceCust(scope.row)">跟进</el-button>
                    <div class="mid-space"></div>
                    <el-button type="warning" icon="el-icon-edit" size="small" @click="transferStatus(scope.row)">移交</el-button>
                    <el-button type="danger" icon="el-icon-edit" size="small" @click="mdyStatus(scope.row)">修改状态</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="content-footer">
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    background
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
                    :total="total"
                    layout="sizes,prev,pager,next,total"
            >
            </el-pagination>
        </div>
        <!--添加和编辑弹框-->
        <e-customer-dialog
                :dialogTitle="dialogTitle"
                :editID="editID"
                :departments="departments"
                :mktLists="mktLists"
                :dialogVisible="dialogStatus === status.edit"
                :depForm="depForm"
                @beforeClose="beforeClose"
        />
        <trace-cust-dialog
                :tDialogVisible="dialogStatus === status.trace"
                :tForm="tForm"
                @closeTDialog="beforeClose"
        />
        <exchange-seller-d-ialog
                :exSellerDialogVisible="dialogStatus === status.exchange"
                :tForm="tForm"
                :mktLists="mktLists"
                @closeEDialog="beforeClose"
        />
        <edit-status-dialog
            :eStatDialogVisible="dialogStatus === status.estatus"
            :tForm="tForm"
            :editID="editID"
            @closeSDialog="beforeClose"
        />
    </div>
</template>

<script>
    import {
        getCustomersApi,
        getMarketEmployeesApi,
        getSysDictionaryItemsApi
    } from "@/request/api";
    import ECustomerDialog from './children/ECustomerDialog'
    import TraceCustDialog from './children/TraceCustDialog'
    import EditStatusDialog from './children/EditStatusDialog'
    import ExchangeSellerDIalog from './children/ExchangeSellerDIalog'
    import status from '@/config/status'

    export default {
        name: "PotentialCustomer",
        data() {
            return {
                keyword: '',
                selectSellerID: null,
                departments: ['全部', '潜在客户', '正式客户', '资源池客户', '失败客户', '流失客户'],
                mktLists: [],
                employees: [],
                pageSize: 10,
                currentPage: 1,
                selectEIds: [],
                total: 0,
                dialogTitle: '',
                dialogStatus: '',
                status: status,
                tForm: {},
                editID: null,
                depForm: {
                    name: '',
                    age: '',
                    gender: '',
                    tel: '',
                    qq: '',
                    job: '',
                    sources: '',
                    seller: ''
                }
            }
        },
        computed: {},
        components: {
            ExchangeSellerDIalog,
            ECustomerDialog,
            TraceCustDialog,
            EditStatusDialog
        },
        methods: {
            // 请求员工列表
            queryEmployeeData() {
                getCustomersApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword,
                    status: 0,
                    sellerId: this.selectSellerID
                }).then(res => {
                    if (res.success === true) {
                        this.employees = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            // 表格数量发生改变
            sizeChange(val) {
                this.pageSize = val
                this.queryEmployeeData()
            },
            // 页码发生改变
            currentChange(val) {
                this.currentPage = val
                this.queryEmployeeData()
            },
            // 关闭弹框前
            beforeClose(reload) {
                this.dialogStatus = ''
                if (reload) {
                    this.queryEmployeeData()
                }
            },
            // 点击添加按钮事件
            addPCustomerData() {
                this.dialogTitle = '客户添加'
                this.dialogStatus = status.edit
                this.depForm = {}
            },
            // 编辑一条部门数据
            editDep(row) {
                this.dialogTitle = '客户编辑'
                this.$nextTick(() => {
                    this.depForm = {...row} // 对象解构方式赋值
                    row.source && (this.depForm.source = row.source.id)
                    row.job && (this.depForm.job = row.job.id)
                    row.seller && (this.depForm.seller = row.seller.id)
                    this.editID = row.id
                })
                this.dialogStatus = status.edit
            },
            traceCust(row) {
                this.$nextTick(() => {
                    this.tForm = {...row}
                })
                this.editID = row.id
                this.dialogStatus = status.trace
            },
            mdyStatus(row) {
                this.$nextTick(() => {
                    this.tForm = {...row}
                })
                this.editID = row.id
                this.dialogStatus = status.estatus
            },
            transferStatus(row) {
                this.$nextTick(() => {
                    this.tForm = {...row}
                    this.tForm.sellerName =  row.seller ? row.seller.name : ''
                })
                this.editID = row.id
                this.dialogStatus = status.exchange
            },
        },
        created() {

            // 请求销售人员列表
            getMarketEmployeesApi({
            }).then(res => {
                if (res.success === true) {
                    this.mktLists = res.data
                }
            })

            this.queryEmployeeData()
        }
    }
</script>

<style type="text/less" lang="less" scoped>
    .mid-space {
        height: 10px;
    }
</style>